<template>
  <div class="briefMedicalHistory">
    <div class="box_l">
      <div class="title">评分情况</div>
      <el-table :data="scoreRecord" border style="width: 100%">
        <el-table-column
          v-slot="{ row }"
          label="时间"
          align="center"
          width="120px"
        >
          {{ format(new Date(row.gradeTime), 'yyyy-MM-dd HH:mm') }}
        </el-table-column>
        <el-table-column v-slot="{ row }" label="评分项" align="center">
          {{ row.pgName }}
        </el-table-column>
        <el-table-column
          v-slot="{ row }"
          label="分值"
          align="center"
          width="150px"
        >
          {{ row.showValue }}
        </el-table-column>
      </el-table>
    </div>
    <div class="box_r">
      <div class="title">呼吸机</div>
      <el-table :data="respList" border style="width: 100%">
        <el-table-column
          v-for="(item, index) in respColumns"
          :key="index"
          v-slot="{ row }"
          :label="item.label"
          :width="item.width"
          align="center"
        >
          <template v-if="item.value === 'time'">
            {{ format(new Date(row[item.value]), 'yyyy-MM-dd HH:mm') }}
          </template>
          <template v-else-if="item.value === 'config_mode'">
            {{
              dict.config_mode.find(v => v.code === row[item.value])?.name ||
              row[item.value]
            }}
          </template>
          <template v-else>
            {{ row[item.value] }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { endOfDay, format, startOfDay } from 'date-fns'
import { cloneDeep } from 'lodash'
import {
  computed,
  defineComponent,
  onBeforeUnmount,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import { estimate } from '@/api/nursing/operate'
import { getBusFromInstance, getStoreFromInstance } from '@/utils/instance'

export default defineComponent({
  props: {
    printing: {
      type: Boolean,
      default: false
    },
    docData: {
      type: Object,
      default: () => ({})
    },
    docTopExtendPage: {
      type: Array,
      default: () => []
    },
    pageConfig: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const state = reactive({
      respColumns: [
        {
          label: '时间',
          value: 'time',
          width: '120px'
        },
        {
          label: '呼吸机模式',
          value: 'config_mode',
          width: '200px'
        },
        {
          label: 'PS(cmH2O)',
          value: 'config_psabove'
        },
        {
          label: 'f(b/min)',
          value: 'config_f',
          width: '70px'
        },
        {
          label: 'Pinsp',
          value: 'pinsp',
          width: '70px'
        },
        {
          label: 'O2(%)',
          value: 'o2',
          width: '70px'
        },
        {
          label: 'PEEP(cmH2O)',
          value: 'config_peep'
        },
        {
          label: 'VT',
          value: 'config_vt',
          width: '70px'
        },
        {
          label: 'FIO2(%)',
          value: 'fio2',
          width: '70px'
        }
      ],
      respList: [],
      scoreRecord: [],
      dict: {
        config_mode: []
      }
    })

    const store = getStoreFromInstance()
    const bus = getBusFromInstance()

    const patCur = computed(() => store.getters.patCur)

    function getDict() {
      estimate.getDict({ obsvCode: 'config_mode' }).then(({ data }) => {
        if (data) {
          state.dict.config_mode = data.map(res => {
            return {
              code: res.obsvCode,
              name: res.obsvName
            }
          })
        }
      })
    }

    getDict()

    watch(
      () => props.docData,
      val => {
        const startIndex = Math.min(...props.docTopExtendPage)
        const endIndex = Math.max(...props.docTopExtendPage)
        state.respList = val.respList
          ? val.respList.slice(startIndex, endIndex + 1)
          : []
        state.scoreRecord = val.scoreRecord
          ? val.scoreRecord.slice(startIndex, endIndex + 1)
          : []
      },
      {
        deep: true,
        immediate: true
      }
    )

    return {
      ...toRefs(state),
      format
    }
  }
})
</script>

<style scoped lang="scss">
.briefMedicalHistory {
  display: flex;
  font-size: 13px;
  border-bottom: 1px solid;
  border-left: 1px solid;

  .title {
    text-align: center;
    line-height: 39px;
    border-bottom: 1px solid #000;
  }

  .box_l {
    width: 500px;
    flex-shrink: 0;

    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;

      .label {
        width: 6em;
        flex-shrink: 0;
        text-align: right;
      }

      .unit {
        padding-left: 10px;
      }

      .input {
        width: 50px;
        text-align: center;

        :deep {
          .el-input__inner {
            padding: 0 6px;
            text-align: center;
          }
        }
      }
    }
  }

  .box_r {
    width: 100%;
    border-left: 1px solid;

    .textarea {
      min-height: 200px;
      width: 100%;
      border: none;
      padding: 5px 15px;
    }

    .recordBy {
      padding-bottom: 10px;
      padding-right: 20px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .item {
        display: flex;
        align-items: center;
        margin-left: 40px;
      }
    }
  }

  :deep {
    .el-input__inner {
      border-color: #aaa;
      color: #000;
      font-size: 13px;
    }

    .el-textarea__inner {
      border: none;
      color: #000;
      font-size: 13px;
      padding: 0;
    }

    .cell {
      font-size: 13px;
      color: #333;
      padding: 0 !important;
    }

    .el-table th.el-table__cell.is-leaf,
    .el-table td.el-table__cell {
      border-bottom-color: #000;
    }

    .el-table {
      border: none;
    }

    .el-table thead {
      color: #333;
    }

    .el-table,
    .el-table tr,
    .el-table th.el-table__cell {
      background: transparent;
    }

    .el-table::before,
    .el-table--group::after,
    .el-table--border::after {
      height: 0;
      background: transparent;
    }

    .el-table--border .el-table__cell {
      border-right: none;
      border-left: 1px solid #000;

      &:first-child {
        border-left: none;
      }
    }
  }
}
</style>
